<template>
  <div class="menuClass">
    <el-menu
      :default-active="currentActive"
      unique-opened
      mode="vertical"
      class="el-menu-vertical-demo"
      :collapse="isCollapse">
      <menu-item :menuData="menuData"></menu-item>
    </el-menu>
  </div>

</template>
<script type="text/javascript">
import bus from '@/common/util/bus.js'
import menuItem from './item'

export default {
  name: 'app',
  props: {
    currentActive: String,
    menuData: Array
  },
  data () {
    return {
      isCollapse: false
    }
  },
  components: {
    menuItem
  },
  created () {
    //  折叠按钮
    bus.$on('collapse', (value) => {
      this.isCollapse = value
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.el-menu {
  border: 0 !important;
}

.menuClass::-webkit-scrollbar {
  display: none;
}

.menuClass {
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
}
</style>
